<template>
	<view>
		<view class="exith">
			
		</view>
		<navbar 
		title="确认支付"
		leftText="关闭"
		@clickLeft="clickfun"
		>
		</navbar>
		
		<view class="order-content">
			<radio-group name="">
				<view class="" v-for="(item,index) in paylist" :key="item.id">
				
				<view class="all">
					<view class="alimg">
						<image class="leftimg" :src="item.img" mode=""></image>
					</view>
					<view class="content">
						<view class="">
							{{ item.name}}
						</view>
						<view class="color">
							{{item.title}}
						</view>
					</view>
					<view class="pnall">
						<label class="radio">
							<radio value="" @tap="trucli"/><text></text>
						</label>
					</view>
		
				</view>
				<mylines></mylines>
			</view>
			</radio-group>
			
		</view>
		
		<view class="firmbutbot">
			<view class="botto">
				<view class="upmitc">
					 金额:
				</view>
				<view class="upmitc f-active-color">
					¥{{money}}
				</view>
				<!-- #ifdef APP-PLUS -->
					<view class="upmit" @tap="goPayment('app')">
						提交支付订单
					</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
					<view class="upmit" @tap="goPayment('h5')">
						提交支付订单
					</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/uni/uni-nav-bar/uni-nav-bar.vue"
	import mylines from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	// import {mapState} from 'vuex'
	export default {
		data() {
			return {
				details:{
					pprice:0,
					uuid:-1,
					sel:false,
					goodslist:{},
				},
				name:'',
				money:0,time:"",uu_class:"",uu_science:"",uu_tel:"",uu_address:"",rate:"",tec_tel:"",tec_name:"",tec_school:"",tec_id:"",uuid:"",
				getalldata:{},
				paylist:[],
				orderidlist:-1
			};
		},
		components:{
			navbar,mylines
		},
		methods:{
			trucli(){
				this.sel = true
			},
			clickfun(){
				uni.navigateBack({
					delta:1
				})
			},
			getname(){
				for(let o = 0 ;o <this.details.goodslist.length ; o++){
					this.name += this.details.goodslist[o].name
				}
			},
			//获取页面基本数据:
			getdata(){
					$http.request({
						url: "/payments"
					}).then((res) => {
						this.paylist = res.paylist;
					}).catch(() => {
						uni.showToast({
							title:"请求payments失败",
							icon:"none"
						})})
			},
			//选择支付方式:
			goPayment(methodss){
				if(! this.sel){
					uni.showToast({
						title:"请选择支付方式!",
						mask:true,
						icon:"none"
					})
					return
				}
				$http.request({
					url: "/addOrder",
					method:"POST",
					header:{
						token:true
					},
					data:{
						money:this.money ,
						uu_address: this.uu_address ,
						uu_class:this.uu_class ,
						uu_science:this.uu_science ,
						uu_tel:this.uu_tel ,
						uuid:this.uuid,
						time:this.time ,
						rate:this.rate ,
						tec_school:this.tec_school ,
						tec_name:this.tec_name ,
						tec_tel:this.tec_tel ,
						tec_id:this.tec_id,
					}
				}).then((res) => {
					this.postpayment(methodss)
					uni.navigateTo({
						url:`/pages/my-order/my-order`
						})
				}).catch(() => {
					uni.showToast({
						title:"addOrder请求失败",
						icon:"none"
					})
				})
				
			
			},
			//获取,跳转支付(然后生成订单):
			postpayment(methodss){
				$http.request({
					url: "/payment",
					method:"POST",
					header:{
						token:true
					},
					data:{
						money:this.money,
						tec_name:this.tec_name,
						tec_tel:this.tec_tel,
						tec_id:this.tec_id,
						uu_id : this.uuid,
						order_time : this.time
					}
				}).then((res) => {
					 if(methodss == 'app'){
						 this.orderidlist = res.order_id;
						 this.generateMyOrder(res.formData.fields[0].value);
						 
						//打开外部资源:
						plus.runtime.openURL(res.paymentUrl)  //成功
					 }else if(methodss == 'h5'){
						 this.orderidlist = res.order_id;
						  this.generateMyOrder(res.formData.fields[0].value);
						  window.location.href = res.paymentUrl
					 }
					 
				}).catch(() => {
					uni.showToast({
						title:"支付接口请求失败",
						icon:"none"
					})
				})
			},
			//生成我的订单-字段:收款方:订单号:商品名称:商品描述:交易金额:
			generateMyOrder(getMyOrderform){
				$http.request({
					url: "/generateMyOrder",
					method:"POST",
					header:{
						token:true
					},
					data:{
						MyOrderform:getMyOrderform
					}
				}).then((res) => {
					
				}).catch(() => {
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
			},
			
			
			//获取订单数据调试中......
			getorderdatanumber(){
				$http.request({
					url: "/orderdatanumber",
					method:"POST",
					header:{
						token:true
					},
					data:{
						
					}
				}).then((res) => {
					
					
				}).catch(() => {
					uni.showToast({
						title:"addOrder请求失败",
						icon:"none"
					})
				})
			}
		},
		onLoad(e) {
			// this.details = JSON.parse(e.details)
			this.money = e.money;
			this.uu_address = e.uu_address;
			this.uu_class = e.uu_class;
			this.uu_science = e.uu_science;
			this.uu_tel = e.uu_tel;
			this.time = e.time;
			this.rate = e.rate;
			this.tec_school = e.tec_school;
			this.tec_name = e.tec_name;
			this.tec_tel = e.tec_tel;
			this.tec_id = e.tec_id;
			this.uuid = e.uuid;
			},
		computed:{
		
		},
		onReady() {
			this.getdata()
		}
	}
</script>

<style lang="scss">
	.exith{
		height: 95rpx;
	}
.order-content {

		.all {
			display: flex;
			justify-content: space-between;
			padding:10rpx 20rpx;
			.alimg{
				.leftimg {
				width: 80rpx;
				height: 80rpx;
			}
			}
			

			.content {
				width: 450rpx;

				.color {
					color: #cccccc;
					font-size: 28rpx;
				}

				.free {
					color: #42B7FB;
				}
			}

			.pnall {
				.prinum {

					padding: 10rpx 20rpx;

					.pri {
						font-weight: 800;
					}

					.num {
						display: flex;
						justify-content: end;
						color: #cecece;
					}
				}
			}

		}

	}
	.firmbutbot {
		width: 100%;
		height: 90rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		.botto {
			display: flex;
			padding-left: 220rpx;
			.upmitc{
				padding: 10rpx 10rpx;
			}
			.upmit{
				padding: 10rpx 20rpx;
				background-color:#f21e0c ;
				border: 1rpx solid #282c35;
				color: #f6f6f6;
				font-size: 26rpx;
				border-radius: 30rpx;
			}
		}
	}
</style>
